<template>
  <section class="todoapp">
    <!-- 组件作用：
           1：复用
           2：简化代码，简化结构
          封装时重点：功能独立性较强的，可以复用的功能         
    主体部分渲染
       父传子
          <子组件标签  :属性名="值"  />
          子组件内： props:['属性名']
    删除
      子传父：子调用父的方法
         <子组件标签  @方法名="父组件方法" />
         子组件内：this.$emit('方法名',实参值)  

    持久化：
      1：值修改了就存储到浏览器
      2：初始值读取浏览器存储 
     -->
    <!-- 头部部分 -->
    <TodoHeader @add="add"></TodoHeader>
    <!-- 主体部分 -->

    <TodoMain
      :list="list"
      :type="type"
      @del="del"
      @setState="setState"
    ></TodoMain>
    <!-- 底部部分 -->
    <TodoFooter
      :list="list"
      @clear="clear"
      :type="type"
      @setType="setType"
    ></TodoFooter>
    <!-- <h1>{{ num }}</h1>
    <button @click="setNum">修改num</button> -->
  </section>
</template>

<script>
import TodoHeader from '@/components/TodoHeader.vue'
import TodoMain from '@/components/TodoMain.vue'
import TodoFooter from '@/components/TodoFooter.vue'
export default {
  data () {
    return {
      num: +localStorage.getItem('num') || 1,
      list: JSON.parse(localStorage.getItem('list')) || [
        { id: 1, name: '吃饭', isDone: true },
        { id: 2, name: '睡觉', isDone: false },
        { id: 3, name: '打豆豆', isDone: true }
      ],
      type: localStorage.getItem('type') || 'all' // all  active  completed
    }
  },
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  watch: {
    list: {
      handler (newVal) {
        console.log('watch:list')
        localStorage.setItem('list', JSON.stringify(newVal))
      },
      deep: true
    }
  },
  methods: {
    // 删除
    del (id) {
      this.list = this.list.filter(item => item.id !== id)
      // localStorage.setItem('list', JSON.stringify(this.list))
      console.log('del', id)
    },
    // 修改状态
    setState (id) {
      // find  返回值=数组.find(item=>{return boolean   true:返回值=item   false:  所有项都是false,返回值=undefined   })
      const findItem = this.list.find(item => item.id === id)
      findItem.isDone = !findItem.isDone
      // localStorage.setItem('list', JSON.stringify(this.list))
      // console.log('setState', findItem)
    },
    // 新增
    add (obj) {
      this.list.push(obj)
      // localStorage.setItem('list', JSON.stringify(this.list))
      // console.log('add')
    },
    // 清空已完成
    clear () {
      this.list = this.list.filter(item => item.isDone === false)
      // localStorage.setItem('list', JSON.stringify(this.list))
      console.log('clear')
    },
    // 修改type
    setType (str) {
      this.type = str
      localStorage.setItem('type', this.type)
      console.log('setType', str)
    },
    setNum () {
      this.num++
      localStorage.setItem('num', this.num)
    }
  }
}
</script>

<style></style>
